<template>
    <div class="crm-contract-account-info-container">
        <el-dialog title="客户详情" v-model="isShowDialog" width="95%" :close-on-click-modal="false" :style="{ minHeight: '500px' }">
            <el-tabs v-model="activeName" class="account-detail ml15">
                <el-tab-pane label="记账详情" name="account">
                    <el-descriptions :column="4" border>
                        <el-descriptions-item label="账期序号">{{ account.periodNum }}</el-descriptions-item>
                        <el-descriptions-item label="合同编号">{{ account.contract?.contractCode }}</el-descriptions-item>
                        <el-descriptions-item label="合同名称">{{ account.contract?.contractName }}</el-descriptions-item>
                        <el-descriptions-item label="记账主题">{{ account.title }}</el-descriptions-item>

                        <el-descriptions-item label="开始时间">{{ account.accountStartTime }}</el-descriptions-item>
                        <el-descriptions-item label="结束时间">{{ account.accountEndTime }}</el-descriptions-item>
                        <el-descriptions-item label="记账类型">
                            <el-tag v-if="account.accountType == 'D'">按天</el-tag>
                            <el-tag v-if="account.accountType == 'W'">按周</el-tag>
                            <el-tag v-if="account.accountType == 'M'">按月</el-tag>
                        </el-descriptions-item>
                        <el-descriptions-item label="申报状态">{{ account.reportStatus == '0' ? '未申报' : '已申报' }}</el-descriptions-item>
                        
                        <el-descriptions-item label="税种名称">{{ account.taxation }}</el-descriptions-item>
                        <el-descriptions-item label="开票数量">{{ account.invoiceNum }}</el-descriptions-item>
                        <el-descriptions-item label="交付内容">{{ account.content }}</el-descriptions-item>
                    </el-descriptions>
                    <el-descriptions class="mt15" :column="4" border>
                        <el-descriptions-item label="创建者">{{ account.createBy }}</el-descriptions-item>
                        <el-descriptions-item label="创建时间">{{ account.createTime }}</el-descriptions-item>
                        <el-descriptions-item label="更新者">{{ account.updateBy }}</el-descriptions-item>
                        <el-descriptions-item label="更新时间">{{ account.updateTime }}</el-descriptions-item>
                        
                        <el-descriptions-item label="所属用户">{{ account.userName }}</el-descriptions-item>
                        <el-descriptions-item label="所属部门">{{ account.deptName }}</el-descriptions-item>
                        <el-descriptions-item label="备注">{{ account.remark }}</el-descriptions-item>
                    </el-descriptions>
                </el-tab-pane>
            </el-tabs>
        </el-dialog>
    </div>
</template>

<script lang="ts">
import { reactive, toRefs, ref } from 'vue';
import { getCrmContractAccount } from '/@/api/crm/contract/account/index';
export default {
    name: 'crm/contract/account/info',
    components: {
        
    },
    setup(props, context) {
        const state = reactive({
            isShowDialog: false,
            activeName: 'account',
            account: {},
        });

        // 打开弹窗
        const openDialog = (row?: object) => {
            state.isShowDialog = true;
            if(row){
                getCrmContractAccount({id: row.id}).then((res) => {
                    if(res.code == 0){
                        state.account = Object.assign({}, res.data);
                    }
                });
            }
        };
        // 关闭弹窗
        const closeDialog = (row?: object) => {
            state.isShowDialog = false;
        };

        return {
            openDialog,
            closeDialog,
            ...toRefs(state),
        };
    },
};
</script>
<style scoped lang="scss">
.crm-contract-account-info-container {
    :deep .el-descriptions .is-bordered-label {
        width: 100px !important; /* 固定宽度为 100px */
    }
}
</style>